$(function () {
    /*区域滚动*/
    mui('.mui-scroll-wrapper').scroll({
        indicators:false
    });

    // TODO:页面初始化时，页面在输入框内显示
    var urlParams = CT.getParamsByUrl();
    var $input = $('input').val(urlParams.key || '');
    // TODO：页面初始化时，根据关键字查询第一页数据  => 下拉刷新时  实现了自动加载
    // getSearchData({
    //   proName: urlParams.key,
    //   page: 1,
    //   pageSize: 4,
    // },function(data){
    //   $(".lt_product").html(template('list',data));
    // });
    // TODO:进行搜索时，重置排序功能
    $('.lt_search a').on('tap', function () {
      var key = $.trim($input.val());
      if (!key) {
        mui.toast('请输入关键字');
        return false;
      }
      getSearchData({
        proName: key,
        page: 1,
        pageSize: 4
      }, function (data) {
        $('lt_product').html(template('list',data));
      });
    });
    // TODO:实现排序功能
    $('.lt_order a').on('tap', function () {
      var $this = $(this);
      //如果之前没有选择
      if(!$this.hasClass('now')){
        // 点击为选中状态,并且箭头默认向下 => 默认降序排列
        $this.addClass('now').siblings().removeClass('now').find('span').removeClass('fa-angle-up').addClass('fa-angle-down');
      }else{
        // 有now时，根据箭头方向判断是降序 || 升序
        if ($this.find('span').hasClass('fa-angle-down')) {
          $this.find('span').removeClass('fa-angle-down').addClass('fa-angle-up');
        }else {
          $this.find('span').removeClass('fa-angle-up').addClass('fa-angle-down');
        }
      }

      // 获取当前点击对象中的自定义属性，实现数据筛选
      var order = $this.attr('data-order');
      var orderVal = $this.find('span').hasClass('fa-angle-up') ? 1 : 2;
      var key = $.trim($input.val());
      if( !key ){
        mui.toast('请输入关键字');
        return false;
      }
      var params = {
        proName: key,
        page: 1,
        pageSize: 4
      } 
      params[order] = orderVal;  

      getSearchData(params, function (data) {
        $('.lt_product').html(template('list',data));
      });
    });
    // TODO:实现下拉刷新，上拉加载
    mui.init({
      pullRefresh: {
        // 上拉 || 下拉 => 容器
        container: "#refreshContainer",
        down: {
          auto: true,
          callback: function () {
            var that = this;
            var key = $.trim($input.val());
            if(!key){
              mui.toast('请输入关键字');
              return false;
            }

            // 重置排序
            $('.lt_order a').removeClass('now').find('span').removeClass('fa-angle-up').addClass('fa-angle-down');
            getSearchData({
              proName: key,
              page: 1,
              pageSize: 4,
            },function (data) {
              setTimeout(function () {
                $('.lt_product').html(template('list',data));
                that.endPulldownToRefresh();
                that.refresh(true);
              },500);
            });
          }
        },
        up: {
          callback: function () {
            window.page ++;
            var that = this;
            var key = $.trim($input.val());
            if(!key){
              mui.toast('请输入关键字');
              return false;
            }
            var order = $('.lt_order a.now').attr('data-order');
            var orderVal = $('.lt_order a.now').find('span').hasClass('fa-angle-up') ? 1 : 2;
            var params = {
              proName: key,
              page: window.page,
              pageSize: 4
            };
            params[order] = orderVal;
            getSearchData(params, function (data) {
              setTimeout(function () {
                // html => 会覆盖之前的内容
                $('.lt_product').append(template('list',data));
                if(data.data.length){
                  that.endPullupToRefresh();
                }else{
                  that.endPullupToRefresh(true);
                }
              },500);
            });
          }
        }
      }
    });
});

function getSearchData (params,callback) {
  $.ajax({
    url: '/product/queryProduct',
    type: 'get',
    data: params,
    dataType: 'json',
    success: function (data) {
      window.page = data.page;
      callback && callback(data);
    }
  });
}